<template>
  <div class="shade" v-show="filterShow">
    <div class="shadeChoose">
      <div class="vicp-close"  @click="filterShow=false">
        <i class="el-icon-close vicp-icon4"></i>
      </div>
      <div class="shadeMain">
        <div class="serversChoose">
          <div class="serverSwitch">
            <span class="switch">选择全服：</span>
            <span class="chooseEnd">
              已选择
              <span :style="{'color':this.$store.getters.theme[1]}">{{serverNumber}}</span>
              项
            </span>
          </div>
          <div class="chinnelRadio" v-show="serverSwitch">
            <div class="filter">
              <el-input v-model="serverVal" placeholder="请输入服务器名称" icon="search"></el-input>
              <el-button type="info" size="small" @click='allSelect'>全选</el-button>
              <el-button type="info" size="small" @click='noSelect'>不选</el-button>
              <el-button type="info" size="small" @click='invertSelect'>反选</el-button>
            </div>
            <template>
              <el-checkbox-group v-model="checkedServers" @change="handleCheckedServersChange">
                <el-checkbox v-for="(val,key) in newServers" :label="val.label" :key="key">{{val.value}}</el-checkbox>
              </el-checkbox-group>
            </template>
            <div class="afterChoose">
              <div class="tagTop">
                <p>选中筛选条件：</p>
                <el-button type="danger" size="small" @click='noSelect'>清空</el-button>
              </div>
              <div class="tagGroup">
                <el-tag
                  :key="tag"
                  v-for="tag in dynamicTags"
                  :closable="true" type="success"
                  :close-transition="false"
                  @close="handleClose(tag)"
                >{{tag}}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
        <div class="sureBtn">
          <el-button type="info" @click='sure'>确认</el-button>
          <el-button type="danger" @click="cancel">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return{
        // 高级筛选模态框
        filterShow: false,
        // 服务器筛选开关
        serverSwitch: true,
        // 服务器的搜索框的值
        serverVal: '',
        // 服务器选择的数量
        serverNumber: 3,
        // 区服标签
        serverTagValue: '全区服',
        // 已经选择服务器的数量
        checkedServers: [],
        // 已选服务器标签
        dynamicTags:[],
      }
    },
    methods: {
      // 已选{{serverNumber}}
      serverNumFun() {

      },
      // 全选
      allSelect() {
        this.checkedServers = [];
        this.dynamicTags = [];
        for(var y=0; y<this.servers.length; y++){
          this.checkedServers.push(this.servers[y]['label']);
          this.dynamicTags.push(this.servers[y]['value'])
        }
        this.serverNumber = this.checkedServers.length;
      },
      // 不选
      noSelect() {
        this.checkedServers = [];
        this.dynamicTags = [];
        this.serverNumber = this.checkedServers.length;
      },
      // 反选
      invertSelect() {
        var servers =[];
        var tags = [];
        for(var y=0; y<this.servers.length; y++){
          servers.push(this.servers[y]['label']);
          tags.push(this.servers[y]['value'])
        }
        for(var i =0; i<servers.length; i++){
          for(var j =0; j<this.checkedServers.length; j++){
            if(this.checkedServers[j] === servers[i]){
              servers.splice(i,1);
              tags.splice(i,1);
            }
          }
        }
        this.checkedServers = servers;
        this.dynamicTags = tags;
        this.serverNumber = this.checkedServers.length;
      },
      // 服务选择
      handleCheckedServersChange(val) {
        this.serverNumber = val.length;
        this.dynamicTags = [];
        for(var i=0; i<this.servers.length; i++){
          for(var j=0; j<val.length; j++){
            if(val[j]===this.servers[i]['label']){
              this.dynamicTags.push(this.servers[i]['value'])
            }
          }
        }
      },
      // 区服标签点击
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        for(var i=0; i<this.servers.length; i++){
          if(tag === this.servers[i]['value']){
            for(var j=0; j<this.checkedServers.length; j++){
              if(this.checkedServers[j] === this.servers[i]['label']){
                this.checkedServers.splice(j,1)
              }
            }
          }
        }
      },
      // 模态框确定
      sure() {
        this.filterShow = false;
        this.postobj.serverItmes = this.checkedServers.join(',');
        this.$emit('get',this.postobj)
      },
      // 模态框取消关闭数据不记录
      cancel() {
        this.filterShow = false;
      },
    },
    computed: {
      // 区服过滤
      newServers: function() {
        var that = this;
        return that.servers.filter(function(item) {
          return item.value.toLowerCase().indexOf(that.serverVal.toLowerCase()) !== -1;
        })
      }
    },
    props: ['servers','postobj']
  }
</script>
